<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>用函数写选项卡</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
			}
			.cl{
				clear: both;
			}
			.nav{
				width: 310px;
				margin: 5px auto 0;
				border-top: 3px solid #206F96;
			}
			.content{
				width: 310px;
				margin: 0 auto;
			}
			.nav ul li{
				float: left;
				width: 102px;
				height: 29px;
				border-left: 1px solid #ccc;
				border-bottom: 1px solid #ccc;
				text-align: center;
				line-height: 29px;
				background: url(img/bg.png) repeat-x;
			}
			.nav ul li.last{
				border-right: 1px solid #ccc;
			}
			.nav ul li.no_bg_btm{
				/*没有背景,层叠掉背景
				background: none;*/
				background: url();
				border-bottom: none;
			}
			#move123,#music123{
				display: none;
			}
			.content ul li a{
				color: #505050;
				text-decoration: none;
			}
			.content ul li a:hover{
				color: blue;
				text-decoration: underline;
			}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				var my_news=document.getElementById('news');
				var my_move=document.getElementById('move');
				var my_music=document.getElementById('music');
				
				var my_news123=document.getElementById('news123');
				var my_move123=document.getElementById('move123');
				var my_music123=document.getElementById('music123');
				
				my_news.onmouseover=function(){
					whole(my_news,my_news123);
				}
				
				my_move.onmouseover=function(){
					whole(my_move,my_move123);
				}
				
				my_music.onmouseover=function(){
					whole(my_music,my_music123);
				}
				
			//把公共的代码抽取出来封装为函数
				function whole(a,b){
					//1发生事件的标题(li)身上没有背景和下边框，其它 两个标题(li)身上有背景和下边框
					my_news.className="";
					my_move.className="";
					my_music.className=" last ";
					
					a.className="no_bg_btm" + a.className;//等价于下面
//					a.className="no_bg_btm";
//					if(a==my_music){
//						a.className= "no_bg_btm last";
//					}
					
					//2发生事件标题对应的 主体部分的那个ul显示，其它两个ul隐藏
					my_news123.style.display="none";
					my_move123.style.display="none";
					my_music123.style.display="none";
					
					b.style.display="block";
				}
			}
		</script>
	</head>
	<body>
		<div class="nav">
			<ul>
				<li id="news" class="no_bg_btm" onmouseover="news_show()">新闻</li>
				<li id="move" onmouseover="move_show()">影视</li>
				<li id="music" class="last" onmouseover="music_show()">音乐</li>
			</ul>
		</div>
		<div class="cl"></div>
		<div class="content">
			<ul id="news123">
				<li><a href="#">新闻1新闻1新闻1</a></li>
				<li><a href="#">新闻2新闻2新闻2</a></li>
				<li><a href="#">新闻3新闻3新闻3</a></li>
			</ul>
			<ul id="move123">
				<li><a href="#">影视1影视1影视1</a></li>
				<li><a href="#">影视2影视2影视2</a></li>
				<li><a href="#">影视3影视3影视3</a></li>
			</ul>
			<ul id="music123">
				<li><a href="#">音乐1音乐1音乐1</a></li>
				<li><a href="#">音乐2音乐2音乐2</a></li>
				<li><a href="#">音乐3音乐3音乐3</a></li>
			</ul>
		</div>
	</body>
</html>
